<example name="Tags List">
  <file type="html">
    <div id="demo"></div>
  </file>
  <file type="js">
    import React, {createElement} from 'react';
    import {render} from 'react-dom';
    import TagsList from '@jetbrains/ring-ui/components/tags-list/tags-list';

    var props = {
      className: 'test-additional-class',
      tags: [
        {key: 'test1', label: 'test1'},
        {key: 'test2', label: 'test2'}
      ]
    };

    render(
    <TagsList
      className={props.className}
      tags={props.tags}
    />,
    document.getElementById('demo')
    )
  </file>
</example>


<example name="Tags List with icons">
  <file type="html">
    <div id="demo"></div>
  </file>
  <file type="js">
    import React, {createElement} from 'react';
    import {render} from 'react-dom';
    import TagsList from '@jetbrains/ring-ui/components/tags-list/tags-list';
    import checkMarkIcon from '@jetbrains/icons/checkmark.svg';

    var props = {
      tags: [
        {key: 'test1', label: 'test1', rgTagIcon: checkMarkIcon},
        {key: 'test2', label: 'test2'}
      ]
    };

    render(
    <TagsList
      tags={props.tags}
    />,
    document.getElementById('demo')
    )
  </file>
</example>

<example name="Disabled Tags List">
  <file type="html">
    <div id="demo"></div>
  </file>
  <file type="js">
    import React, {createElement} from 'react';
    import {render} from 'react-dom';
    import TagsList from '@jetbrains/ring-ui/components/tags-list/tags-list';

    var props = {
      disabled: true,
      tags: [
        {key: 'test1', label: 'test1'},
        {key: 'test2', label: 'test2'}
      ]
    };

    render(
    <TagsList
      disabled={props.disabled}
      tags={props.tags}
    />
    ,
    document.getElementById('demo')
    );
  </file>
</example>
